// import { LabelWithTips } from "@renderer/components/business/label-with-tips";
// import { Switch } from "@renderer/components/ui/base/switch";
import { Overlay } from "@renderer/components/ui/overlay";
import { useChatParameters } from "@renderer/hooks/use-chat-parameters";
// import { isNull } from "es-toolkit";
import { useTranslation } from "react-i18next";
import { ParametersInput } from "./parameters-input";
import { ParametersSlider } from "./parameters-slider";
// import { PromptTemplateTextarea } from "./prompt-template-textarea";
import { SystemPromptTextarea } from "./system-prompt-textarea";
import { UserPromptTemplateTextarea } from "./user-prompt-template-textarea";

interface ChatParametersSettingOverlayProps {
  isVisible: boolean;
  onClose: () => void;
}

export function ChatParametersSettingModal({
  isVisible,
  onClose,
}: ChatParametersSettingOverlayProps) {
  const { t } = useTranslation("translation", {
    keyPrefix: "chat.tool-bar.parameters",
  });
  const { params, setParam } = useChatParameters();

  return (
    <Overlay size="4xl" isVisible={isVisible} onClose={onClose} isBlurred>
      <div className="p-4 pb-0">
        <h2 className="font-medium text-base">{t("title")}</h2>
      </div>

      <div className="flex max-w-[892px] flex-row gap-x-4 p-4">
        <div className="flex min-w-0 flex-1 flex-col justify-between rounded-[10px] bg-bg px-[20px] py-[22px]">
          <ParametersSlider
            label={t("temperature.label")}
            tips={t("temperature.tips")}
            min={0.0}
            max={2.0}
            value={params.temperature}
            step={0.1}
            onChange={(v) => setParam("temperature", v)}
          />

          <ParametersSlider
            label="Top p"
            tips={t("topP.tips")}
            value={params.topP}
            onChange={(v) => setParam("topP", v)}
            min={0.1}
            max={1.0}
            step={0.1}
          />

          <ParametersInput
            label={t("maxTokens.label")}
            tips={t("maxTokens.tips")}
            value={params.maxTokens}
            onChange={(v) => setParam("maxTokens", v)}
          />

          <ParametersSlider
            label={t("presence_penalty.label")}
            tips={t("presence_penalty.tips")}
            min={-2.0}
            max={2.0}
            value={params.presencePenalty}
            step={0.1}
            onChange={(v) => setParam("presencePenalty", v)}
          />

          <ParametersSlider
            label={t("frequency_penalty.label")}
            tips={t("frequency_penalty.tips")}
            min={-2.0}
            max={2.0}
            value={params.frequencyPenalty}
            step={0.1}
            onChange={(v) => setParam("frequencyPenalty", v)}
          />

          {/* <ParametersSlider
            label={t("number_of_historical_context.label")}
            tips={t("number_of_historical_context.tips")}
            min={0}
            max={100}
            value={params.numberOfHistoricalContext}
            step={1}
            onChange={(v) => setParam("numberOfHistoricalContext", v)}
          />
          <Switch
            className="h-11 rounded-[10px] bg-setting px-3.5 py-2.5"
            isSelected={params.autoabstractContext ?? false}
            onChange={(v) => setParam("autoabstractContext", v)}
            isDisabled={isNull(params.numberOfHistoricalContext)}
          >
            <LabelWithTips
              label={t("auto_abstract_context.label")}
              tips={t("auto_abstract_context.tips")}
              tooltipPlacement="right"
            />
          </Switch>
          <PromptTemplateTextarea
            label={t("abstract_prompt.label")}
            tips={t("abstract_prompt.tips")}
            canReset
            value={params.abstractPrompt}
            onChange={(v) => setParam("abstractPrompt", v)}
          /> */}
        </div>

        <div className="flex min-w-0 flex-1 flex-col gap-y-4 rounded-[10px] bg-bg px-[20px] py-[22px]">
          <SystemPromptTextarea
            value={params.systemPrompt}
            onChange={(v) => setParam("systemPrompt", v)}
          />

          <UserPromptTemplateTextarea
            value={params.userPromptTemplate}
            onChange={(v) => setParam("userPromptTemplate", v)}
          />
        </div>
      </div>
    </Overlay>
  );
}
